<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="EduBot - 基于AI的智能出题系统，支持数学公式和详细答案解析">
    <title>EduBot - 智能出题系统</title>
    <link rel="icon" href="/static/icons/AiKeTangJiaoXuePingCeXiTong.png" type="image/png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.0/github-markdown.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        :root {
            --cyber-primary: #00ffd9;
            --cyber-secondary: #ff2a6d;
            --cyber-accent: #7700ff;
            --cyber-dark: #0a0b1f;
            --cyber-light: #e0e0ff;
            --cyber-glow: 0 0 10px var(--cyber-primary),
                         0 0 20px var(--cyber-primary),
                         0 0 30px var(--cyber-primary);
            --cyber-text-glow: 0 0 5px var(--cyber-primary);
            --cyber-border: 2px solid var(--cyber-primary);
            --cyber-gradient: linear-gradient(45deg, var(--cyber-primary), var(--cyber-accent));
            --cyber-shadow: 0 4px 20px rgba(0, 255, 217, 0.2);
        }

        @font-face {
            font-family: 'Cyberpunk';
            src: url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
        }

        body {
            background: var(--cyber-dark);
            color: var(--cyber-light);
            font-family: 'Orbitron', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
            padding-top: 80px;
        }

        .cyber-grid {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(transparent 0%, rgba(0, 255, 217, 0.05) 2%, transparent 3%),
                linear-gradient(90deg, transparent 0%, rgba(0, 255, 217, 0.05) 2%, transparent 3%);
            background-size: 50px 50px;
            animation: gridMove 20s linear infinite;
            pointer-events: none;
            z-index: -1;
        }

        .cyber-gradient {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, 
                rgba(0, 255, 217, 0.1) 0%, 
                rgba(119, 0, 255, 0.1) 25%, 
                rgba(10, 11, 31, 0.95) 70%);
            pointer-events: none;
            z-index: -2;
        }

        .cyber-lines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(90deg, 
                    transparent 0%, 
                    rgba(0, 255, 217, 0.1) 50%, 
                    transparent 100%);
            background-size: 200% 100%;
            animation: lineMove 8s linear infinite;
            pointer-events: none;
            z-index: -1;
        }

        @keyframes gridMove {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(50px);
            }
        }

        @keyframes lineMove {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        .container {
            position: relative;
            z-index: 1;
            padding-top: 2rem;
        }

        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.8rem 2rem;
            background: rgba(10, 11, 31, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--cyber-primary);
            box-shadow: 0 2px 10px rgba(0, 255, 217, 0.1);
            z-index: 1000;
            border-radius: 0 0 16px 16px;
        }

        .nav-btn, .user-info {
            background: rgba(10, 11, 31, 0.8);
            border: 1px solid var(--cyber-primary);
            color: var(--cyber-primary);
            padding: 0.5rem 1rem;
            border-radius: 12px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            white-space: nowrap;
            backdrop-filter: blur(5px);
        }

        .nav-btn i, .user-info i {
            font-size: 1.1rem;
            color: var(--cyber-primary);
        }

        .user-info {
            background: rgba(119, 0, 255, 0.1);
            border-color: var(--cyber-accent);
            color: var(--cyber-accent);
        }

        .user-info i {
            color: var(--cyber-accent);
        }

        h1 {
            font-size: 1.8rem;
            color: var(--cyber-primary);
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            margin: 0;
            padding: 0 1rem;
            font-weight: 700;
            background: linear-gradient(45deg, var(--cyber-primary), var(--cyber-accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        h1 i {
            font-size: 1.6rem;
            color: var(--cyber-primary);
            -webkit-text-fill-color: var(--cyber-primary);
        }

        h1::before {
            content: '';
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 70%;
            background: var(--cyber-primary);
            box-shadow: 0 0 5px var(--cyber-primary);
        }

        h1::after {
            content: '';
            position: absolute;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 70%;
            background: var(--cyber-primary);
            box-shadow: 0 0 5px var(--cyber-primary);
        }

        .cyberpunk-card {
            background: rgba(10, 11, 31, 0.8);
            border: 1px solid var(--cyber-primary);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: var(--cyber-shadow);
            backdrop-filter: blur(10px);
        }

        .cyberpunk-card:first-of-type {
            margin-top: 1rem;
        }

        .cyberpunk-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--cyber-glow);
        }

        .cyberpunk-input {
            background: rgba(10, 11, 31, 0.6);
            border: 1px solid var(--cyber-primary);
            color: #ffffff;
            border-radius: 12px;
            padding: 1rem;
            width: 100%;
            margin-bottom: 1rem;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .cyberpunk-input:focus {
            outline: none;
            border-color: var(--cyber-accent);
            background: rgba(10, 11, 31, 0.8);
            color: #ffffff;
        }

        .cyberpunk-input::placeholder {
            color: rgba(0, 255, 217, 0.5);
            font-size: 0.95rem;
        }

        textarea.cyberpunk-input {
            min-height: 100px;
            resize: vertical;
        }

        .form-label {
            color: var(--cyber-primary);
            font-size: 0.95rem;
            margin-bottom: 0.5rem;
            display: block;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .form-label::after {
            content: '（可选）';
            color: rgba(0, 255, 217, 0.5);
            font-size: 0.85rem;
            margin-left: 0.5rem;
            text-transform: none;
        }

        .cyberpunk-btn {
            background: var(--cyber-gradient);
            color: var(--cyber-dark);
            border: none;
            padding: 1rem 2rem;
            border-radius: 12px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .cyberpunk-btn:disabled {
            background: #666;
            color: #999;
            cursor: not-allowed;
        }

        .cyberpunk-btn:disabled::before {
            display: none;
        }

        .cyberpunk-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent
            );
            transition: 0.5s;
        }

        .cyberpunk-btn:hover::before {
            left: 100%;
        }

        .cyberpunk-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--cyber-glow);
        }

        .markdown-body {
            background: transparent !important;
            color: var(--cyber-light) !important;
            padding: 1rem;
            border-radius: 4px;
            margin-top: 1rem;
        }

        @media (max-width: 768px) {
            body {
                padding-top: 60px;
            }

            .top-bar {
                padding: 0.6rem 1rem;
            }

            h1 {
                font-size: 1.2rem;
                letter-spacing: 1px;
                padding: 0 0.8rem;
            }

            h1 i {
                font-size: 1.3rem;
            }

            h1::before, h1::after {
                width: 3px;
                left: -8px;
                right: -8px;
                box-shadow: 0 0 3px var(--cyber-primary);
            }

            .nav-btn, .user-info {
                padding: 0.4rem 0.8rem;
                font-size: 0.8rem;
            }

            .nav-btn i, .user-info i {
                font-size: 1rem;
            }

            .cyberpunk-card {
                padding: 1rem;
                margin-bottom: 1rem;
            }
        }

        @media (max-width: 576px) {
            .container {
                padding-left: 10px;
                padding-right: 10px;
            }

            .cyberpunk-card {
                padding: 0.8rem;
                margin-bottom: 0.8rem;
            }

            .form-label {
                font-size: 0.9rem;
            }

            .cyberpunk-input {
                padding: 0.8rem;
            }

            .top-bar {
                padding: 0.5rem 0.8rem;
            }

            h1 {
                font-size: 1rem;
                padding: 0 0.6rem;
            }

            h1 i {
                font-size: 1.1rem;
            }

            h1::before, h1::after {
                width: 2px;
                left: -6px;
                right: -6px;
                box-shadow: 0 0 2px var(--cyber-primary);
            }

            .nav-btn, .user-info {
                padding: 0.3rem 0.6rem;
                font-size: 0.75rem;
            }

            .nav-btn span, .user-info span {
                display: none;
            }

            .nav-btn i, .user-info i {
                font-size: 0.9rem;
                margin: 0;
            }
        }

        .file-input-wrapper {
            position: relative;
            margin-bottom: 1rem;
        }

        .file-input-wrapper input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            z-index: 2;
        }

        .file-input-trigger {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: rgba(10, 11, 31, 0.6);
            border: 1px solid var(--cyber-primary);
            color: var(--cyber-primary);
            padding: 1rem;
            border-radius: 12px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
        }

        .file-input-trigger i {
            font-size: 1.2rem;
        }

        .file-name {
            margin-top: 0.5rem;
            color: var(--cyber-primary);
            font-size: 0.9rem;
            text-align: center;
            display: none;
        }

        .file-name.show {
            display: block;
        }

        .file-input-hint {
            color: rgba(0, 255, 217, 0.6);
            font-size: 0.85rem;
            margin-top: 0.5rem;
            text-align: center;
            font-style: italic;
        }

        .file-input-hint i {
            margin-right: 0.3rem;
        }
    </style>
</head>
<body>
    <div class="cyber-grid"></div>
    <div class="cyber-gradient"></div>
    <div class="cyber-lines"></div>
    
    <div class="top-bar">
        <a href="#" class="nav-btn" id="navBtn">
            <i class="bi bi-grid-3x3-gap"></i>
            <span>导航</span>
        </a>
        <h1 class="m-0"><i class="bi bi-file-earmark-text"></i>EduBot 智能出题系统</h1>
        <div class="user-info">
            <i class="bi bi-person-circle"></i>
            <span id="username">加载中...</span>
        </div>
    </div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="cyberpunk-card mb-3">
                    <div class="card-body">
                        <form id="uploadForm" class="mb-4">
                            <div class="file-input-wrapper">
                                <div class="file-input-trigger">
                                    <i class="bi bi-file-earmark-ppt"></i>
                                    <span>选择 PPTX 文件</span>
                                </div>
                                <input type="file" id="pptxFile" accept=".pptx">
                                <div class="file-name" id="fileName"></div>
                                <div class="file-input-hint">
                                    <i class="bi bi-info-circle"></i>
                                    提示： PPTX 文件为可选项，不选择也可以生成题目。有好的 PPTX 文件做参考，生成的题目和答案解析质量会更高。
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="userPrompt" class="form-label">题目要求</label>
                                <textarea class="form-control cyberpunk-input" id="userPrompt" rows="3" placeholder="请输入具体的题目生成要求，例如：难度、题型、数量等..."></textarea>
                            </div>
                            <button type="submit" class="cyberpunk-btn w-100">生成题目</button>
                        </form>
                    </div>
                </div>

                <div id="questionsSection" class="cyberpunk-card mb-4" style="display: none;">
                    <div class="card-body">
                        <h2 class="card-title">生成的题目</h2>
                        <div id="questionsContent" class="markdown-body"></div>
                        <div class="d-flex justify-content-between mt-3">
                            <button id="generateAnswersBtn" class="cyberpunk-btn">生成答案</button>
                            <button id="saveQuestionsBtn" class="cyberpunk-btn" style="display: none;">
                                <i class="bi bi-save"></i> 保存题目
                            </button>
                        </div>
                    </div>
                </div>

                <div id="answersSection" class="cyberpunk-card" style="display: none;">
                    <div class="card-body">
                        <h2 class="card-title">详细答案</h2>
                        <div id="answersContent" class="markdown-body"></div>
                        <div class="mt-3">
                            <button id="saveAnswersBtn" class="cyberpunk-btn w-100" style="display: none;">
                                <i class="bi bi-save"></i> 保存答案
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <script src="/static/javascripts/PptxGeneratesQuestions.js"></script>
    <script>
        const backend_domain_name = '{{ backend_domain_name }}';
        const front_end_domain_name = '{{ front_end_domain_name }}';
        let token = localStorage.getItem('token');
        let currentPptxText = '';
        let currentQuestions = '';
        let currentPptxFileName = '';

        async function checkAuth() {
            const username = await checkTokenApi(backend_domain_name, token);
            if (!username) {
                window.location.href = front_end_domain_name + '/login_register_page';
            } else {
                document.getElementById('username').textContent = username;
            }
        }

        function renderMarkdown(content, targetElement) {
            targetElement.innerHTML = marked.parse(content);
            
            renderMathInElement(targetElement, {
                delimiters: [
                    {left: '$$', right: '$$', display: true},
                    {left: '$', right: '$', display: false},
                    {left: '\\(', right: '\\)', display: false},
                    {left: '\\[', right: '\\]', display: true}
                ],
                throwOnError: false,
                output: 'html',
                strict: false
            });
        }

        document.getElementById('uploadForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const submitBtn = e.target.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            
            try {
                const pptxFile = document.getElementById('pptxFile').files[0];
                const userPrompt = document.getElementById('userPrompt').value;
                
                if (pptxFile) {
                    currentPptxFileName = pptxFile.name.replace(/\.pptx$/i, '');
                    currentPptxText = await extractPptxText(pptxFile);
                } else {
                    currentPptxFileName = 'default';
                    currentPptxText = '用户未上传 Pptx 知识库，请你根据自己的知识库进行回复';
                }

                const result = await getQuestionsByPptxTextApi(backend_domain_name, token, currentPptxText, userPrompt);
                
                if (result.TF) {
                    currentQuestions = result.ai_output;
                    document.getElementById('questionsSection').style.display = 'block';
                    document.getElementById('saveQuestionsBtn').style.display = 'block';
                    renderMarkdown(result.ai_output, document.getElementById('questionsContent'));
                } else {
                    alert(result.message);
                }
            } catch (error) {
                alert('文件处理错误: ' + error.message);
            } finally {
                submitBtn.disabled = false;
            }
        });

        document.getElementById('generateAnswersBtn').addEventListener('click', async () => {
            const generateAnswersBtn = document.getElementById('generateAnswersBtn');
            const submitBtn = document.querySelector('#uploadForm button[type="submit"]');
            generateAnswersBtn.disabled = true;
            submitBtn.disabled = true;
            
            try {
                const result = await getQuestionsAnswersByQuestionsAndPptxTextApi(
                    backend_domain_name, token, currentQuestions, currentPptxText
                );
                
                if (result.TF) {
                    document.getElementById('answersSection').style.display = 'block';
                    document.getElementById('saveAnswersBtn').style.display = 'block';
                    renderMarkdown(result.ai_output, document.getElementById('answersContent'));
                } else {
                    alert(result.message);
                }
            } catch (error) {
                alert('生成答案错误: ' + error.message);
            } finally {
                generateAnswersBtn.disabled = false;
                submitBtn.disabled = false;
            }
        });

        document.getElementById('saveQuestionsBtn').addEventListener('click', () => {
            const content = currentQuestions;
            const blob = new Blob([content], { type: 'text/markdown' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${currentPptxFileName}_questions.txt`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });

        document.getElementById('saveAnswersBtn').addEventListener('click', () => {
            const content = document.getElementById('answersContent').innerHTML;
            const blob = new Blob([content], { type: 'text/html' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${currentPptxFileName}_answers.html`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });

        document.getElementById('navBtn').addEventListener('click', (e) => {
            e.preventDefault();
            window.location.href = front_end_domain_name + '/navigation_page';
        });

        document.getElementById('pptxFile').addEventListener('change', function(e) {
            const fileName = e.target.files[0]?.name;
            const fileNameElement = document.getElementById('fileName');
            if (fileName) {
                fileNameElement.textContent = fileName;
                fileNameElement.classList.add('show');
            } else {
                fileNameElement.classList.remove('show');
            }
        });

        checkAuth();
    </script>
</body>
</html>
